<template>
  <div style="padding-top:46px">
    <!-- 头部导航 -->
    <van-row class="order_top">
      <van-nav-bar title="卖废品" fixed>
        <van-icon name="arrow-left" slot="left" color="#333" @click="back"/>
      </van-nav-bar>
    </van-row>
    <div class="box">
    <!-- 地址 -->
    <van-row class="order_address">
      <div class="order_address_text" @click="gotoaddress">
        <p>
          <span class="s1">雷佳音 &nbsp;&nbsp;188888888888</span><br>
          <span class="s2">浙江省杭州市拱墅区相符街道余杭塘路478号海蓝创智天地505</span>
        </p>
        <p>
          <i class="iconfont icon-unie61f"></i>
        </p>
      </div>
    </van-row>
    <!-- 价格显示 -->
    <div class="order_price" v-for="tmp in this.$store.getters.wasteForSaleList" :key="tmp.id">
      <div class="order_price_image">
        <img src="../../asset/images/69594998252967366@2x.png" alt="">
      </div>
      <div class="order_price_text">
        <p>{{tmp.name}}</p>
        <p>{{tmp.tip}}</p>
        <PriceRange :min="tmp.min" :max="tmp.max" :showPriceText="false"></PriceRange>
      </div>
    </div>
    <!-- 主要信息 -->
    <div class="order_content">
      <div class="order_content_photo">
        <span>废品拍照</span>
        <span class="s2">(选填)</span>
      </div>
      <div class="order_content_pic">
        <i class="iconfont icon-tupian_huaban"></i>
        <span>添加图片</span>
      </div>
      <hr color="#f0f0f0">
      <div class="order_content_text">
        <p>备注</p>
        <div class="order_content_text_num">
            <textarea maxlength="150"
                      v-model="data"
                      cols="30" rows="3" placeholder="可以简述废品种类、数量 体积">
            </textarea>
          <div>{{remnant}}/150</div>
        </div>
        <p>
          <button v-for="(item,index) in list" :key="item.id"
                  @click="addOrMinus(item); change(index)"
                  class="chang"
                  :class="{cl:changed === index}">
            {{item.name}}
          </button>
        </p>
      </div>
    </div>
    </div>
    <!-- 底部按钮 -->
    <div class="order_footer">
      <button class="btn_order">立即下单</button>
    </div>
  </div>
</template>

<script type="text/babel">
  import PriceRange from '../../component/price/PriceRange';

  export default {
    name: 'ProductIndex',
    components: { PriceRange },
    data() {
      return {
        data: '',
        index: '',
        remnant: 150,
        changed: 0,
        list: [
          {
            id: 1,
            name: '请电话联系'
          },
          {
            id: 2,
            name: '需要捆绑'
          },
          {
            id: 3,
            name: '体积较大'
          },
          {
            id: 4,
            name: '重量较大'
          }
        ],
        pricelist:[
          { 
            name: '报纸',
            message:'需折叠/捆绑',
          },
          {
            name: '报纸',
            message:'需折叠/捆绑',
          }
        ]
      };
    },
    methods: {
      back() {
        this.$router.go(-1);
      },
      gotoaddress() {
        this.$router.push('../address');
      },
      change(index) {
        //  按钮颜色变化
        this.changed = index;
      },
      addOrMinus(item) {
        // 点击按钮 文本框显示对应文字
        this.data = this.data + item.name;
      }
    },
    computed:{
      wasteForSaleList(){
        return this.$store.getters.wasteForSaleList;
      }
    },
    watch: {
      //  监听文本框中字数变化
      data() {
        const txtVal = this.data.length;
        this.remnant = 150 - txtVal;
      }
    }
  };
</script>

<style lang="less" scoped>
  .order_top {
    padding-bottom: 30px;
    .van-nav-bar__left {
      color: #333333;
    }
  }
  .box{
    overflow-y: auto;
  }
  .order_address {
    // height: 170px;
    margin-bottom: 20px;
    font-size: 30px;
    color: #333;
    background-color: #fff;
    .order_address_text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        .s1 {
          font-size: 32px;
        }
        .s2 {
          font-size: 28px;
        }
      }
      p:nth-child(1) {
        margin-left: 30px;
        width: 670px;
      }
      p:nth-child(2) {
        margin-right: 30px;
        i {
          font-size: 32px;
        }
      }
    }
  }

  .order_price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    margin-bottom:20px;
    .order_price_image {
      height: 170px;
      width: 170px;
      padding: 30px;
      img {
        width: 170px;
        height: 170px;
        border: 1px solid #f8f8f8;
      }
    }
    .order_price_text {
      height: 170px;
      width: 560px;
      padding-top: 30px;
      text-align: left;
      p {
        margin: 0;
        background-color: #fff;
      }
      p:nth-child(1) {
        font-size: 30px;
        color: #333333;
        font-weight: bold;

      }
      p:nth-child(2) {
        font-size: 26px;
        color: #999;
      }
    }
  }

  .order_content {
    background-color: #fff;
    margin-top: 20px;
    .order_content_photo {
      padding: 30px;
      font-size: 24px;
      .s2 {
        color: #999;
      }
    }
    .order_content_pic {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 160px;
      height: 160px;
      border: 1px dashed #e1e1e1;
      margin-left: 30px;
      text-align: center;
      color: #999;
      .iconfont {
        font-size: 50px;
      }
    }
    hr {
      margin: 30px;
    }
    .order_content_text {
      padding: 30px;
      padding-top: 0px;
      .order_content_text_num {
        width: 685px;
        height: 200px;
        font-size: 26px;
        margin-bottom: 20px;
        border: 1px solid #e1e1e1;
        background-color: #f8f8f8;
        textarea {
          width: 680px;
          height: 150px;
          border: none;
          resize: none;
          background: #f8f8f8;

        }
        div {
          width: 680px;
          text-align: right;
          border: none;
          margin: 0;
          background: #f8f8f8;
        }
      }
      p:nth-child(3) {
        display: flex;
        justify-content: space-between;
        margin: 0;
        // padding:30px;
        padding-left: 0px;
        button {
          background: none;
          border: 1px solid #afafaf;
          border-radius: 50px;
          height: 44px;
        }
        .cl {
          border: 1px solid #fbcb82;
          color: #fbcb82;
        }
      }
    }
  }

  .order_footer {
    height: 142px;
   
    z-index:10;
    bottom: 0;
    background: #fff;
    padding: 26px 30px;
    font-size: 36px;
  }

  .btn_order {
    width: 690px;
    height: 90px;
    color: white;
    background-color: rgb(247, 165, 40);
    border: none;
    border-radius: 50px;
  }
</style>
